<template>
  <div class="person">
    <h2>当高度达到1000m时，速度-10</h2>
    <h3>当前速度为：{{ speed }}</h3>
    <h3>当前高度为：{{ height }}</h3>
    <button @click="changeSpeed">速度+10</button>
    <button @click="changeHeight">高度+20</button>
  </div>
</template>

<script setup lang="ts" name="PersonComponent">
import { ref, watchEffect, watch } from 'vue';
let speed = ref(10);
let height = ref(100);

const changeSpeed = () => {
  speed.value += 10;
};
const changeHeight = () => {
  height.value += 20;
};
// watch实现
// watch([height, speed], () => {
//   if (height.value >= 500 || speed.value > 50) {
//     console.log('高度达到1000m，关机');
//   }
// });
// 会自动调用
watchEffect(() => {
  console.log(' 特点一：一上来就执行一下');
  // 特点二：自动收集会变化的数据，会变化的数据变化会调用，不会变化的数据不会调用
  if (height.value >= 500 || speed.value > 50) {
    console.log('高度达到1000m，关机');
  }
});
</script>

<style scoped>
.person {
  color: red;
}
ul li {
  font-size: 20px;
}
</style>
